<script setup lang="ts">
import useUserStore from '@/store/modules/user';
import { ProjectVO } from '@/api/exam/project/types';
import { listProjectByUserId } from '@/api/exam/project';

const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const {
  exam_project_status
} = toRefs<any>(proxy?.useDict("exam_project_status"));
const questionSetFlag=ref('Active')
const userStore = useUserStore();
const loading = ref(false)
const total = ref(0)
const params = ref({
  userId: userStore.userId,
  pageNum: 1,
  pageSize: 20
})
const projectList = ref<ProjectVO[]>([])
const getProjectList = async () => {
  loading.value = true;
  const res = await listProjectByUserId(params.value);
  projectList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}


onMounted(async () => {
  await getProjectList()
})
</script>

<template>
  <div class="main-content-body">
    <el-tabs class="w-300px" v-model="questionSetFlag" stretch>
      <el-tab-pane name="Active" label="活跃题目集"></el-tab-pane>
      <el-tab-pane name="All" label="全部题目集"></el-tab-pane>
    </el-tabs>
    <div class="card-content">
      <el-scrollbar>
        <div v-if="questionSetFlag==='Active'">
          <el-card v-loading="loading" v-for="item in projectList.filter(item => item.status === '1')"  class="mt-2 project-list">
            <router-link :to="'/exam/answer/data/' + item.projectId">
              <el-row>
                <el-col :span="12">
                  <div class="flex items-center">
                    <div v-if="item.projectSettingObj.examSetting.randomProject">
                      <svg-icon icon-class="random" color="var(--el-color-primary)" style="font-size: 1.25rem;"/>
                    </div>
                    <div v-else>
                      <svg-icon icon-class="nonrandom" color="var(--el-color-primary)" style="font-size: 1.25rem;"/>
                    </div>
                    <div class="ml-5">
                      <div>{{ item.projectName }}</div>
                      <div style="font-size: 14px;color: rgb(0 0 0 / 0.5)" class="mt-2 ">开始时间:
                        {{ item["projectSettingObj"]["examSetting"]["startTime"] }}
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex flex-col items-end">
                    <div>
                      <dict-tag :options="exam_project_status" :value="item.status"/>
                    </div>
                    <div class="mt-2" style="font-size: 14px">
                      <svg-icon icon-class="school"/>
                      <span class="ml-1">{{ item["dept"]["deptName"] }}</span>
                      <svg-icon icon-class="user" class="ml-2"/>
                      <span class="ml-1">{{ item["user"]["userName"] }}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </router-link>
          </el-card>
          <el-empty v-if="projectList.filter(item => item.status === '1').length===0" description="无数据" />
        </div>
        <div v-if="questionSetFlag==='All'">
          <el-card v-loading="loading" v-for="item in projectList"  class="mt-2 project-list">
            <router-link :to="'/exam/answer/data/' + item.projectId">
              <el-row>
                <el-col :span="12">
                  <div class="flex items-center">
                    <div v-if="item.projectSettingObj.examSetting.randomProject">
                      <svg-icon icon-class="random" color="var(--el-color-primary)" style="font-size: 1.25rem;"/>
                    </div>
                    <div v-else>
                      <svg-icon icon-class="nonrandom" color="var(--el-color-primary)" style="font-size: 1.25rem;"/>
                    </div>
                    <div class="ml-5">
                      <div>{{ item.projectName }}</div>
                      <div style="font-size: 14px;color: rgb(0 0 0 / 0.5)" class="mt-2 ">开始时间:
                        {{ item["projectSettingObj"]["examSetting"]["startTime"] }}
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex flex-col items-end">
                    <div>
                      <dict-tag :options="exam_project_status" :value="item.status"/>
                    </div>
                    <div class="mt-2" style="font-size: 14px">
                      <svg-icon icon-class="school"/>
                      <span class="ml-1">{{ item["dept"]["deptName"] }}</span>
                      <svg-icon icon-class="user" class="ml-2"/>
                      <span class="ml-1">{{ item["user"]["userName"] }}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </router-link>
          </el-card>
          <el-empty v-if="projectList.length===0" description="无数据" />
        </div>
      </el-scrollbar>

    </div>
    <div class="page-content">
      <pagination
        v-show="total>0"
        v-model:limit="params.pageSize"
        v-model:page="params.pageNum"
        :total="total"
        @pagination="getProjectList"
      />
    </div>
  </div>

</template>

<style scoped lang="scss">

</style>
